<template>
    <q-dialog v-model="depotHistory">
      <MyBigDialog title="Car Logs">
        <div v-if="car_logs.length>0">
          <ScrollArea >
            <div v-for="(item, index) in car_logs" :key="index">
              <LogCard class="" :item="item"></LogCard>
              <q-separator inset></q-separator>
            </div>
          </ScrollArea>
        </div>
        <div v-else class="q-pa-md">
          No data found...
        </div>
      </MyBigDialog>
    </q-dialog>
    <div class="extra-area">
      <div class="page-header">
        Part Master
      </div>
    </div>
    <q-card>
      <div class="q-pa-sm">
        <div class="q-gutter-y-md row">
          <div class="col-5 p-status">
            <!--  <q-card-actions align="right" class="text-primary">
                <q-btn flat :label="outstanding" v-close-popup></q-btn>
              </q-card-actions> -->


              <q-card-section>
                <div class="row q-gutter-y-sm">
                  <div class="p-status-field">
                    <div class="col-12 fal q-pa-sm">
                      <div class="weight">Status -</div>
                      <div
                        class="status-box"
                        :class="getStatusColor(partStatus)"
                      >
                        <q-tooltip class="bg-indigo" :offset="[10, 10]">
                          {{ partStatus }}
                        </q-tooltip>
                      </div>
                    </div>
                    <div class="col-12 fal q-pa-sm">
                      <div>
                        <span class="weight"> Stock Code: </span>
                        {{ state.data.stock_code }}
                      </div>
                    </div>
                    <div class="col-12 fal q-pa-sm">
                      <div>
                        <span class="weight"> Serial No: </span>
                        {{ state.data.serial_no }}
                      </div>
                    </div>

                    <div class="fal col-12 q-pa-sm">
                      <div>
                        <span class="weight"> Car: </span>
                        {{ state.data.car }}  <q-btn icon="history" flat color="blue-9" @click="onDepotHistory"></q-btn>
                      </div>
                    </div>
                    <!-- <div class="fal col-12 q-pa-sm">
                      <div>
                        <span class="weight"> Location: </span>
                        {{ state.data.location }}
                      </div>
                    </div> -->
                    <div class="fal col-12 q-pa-sm">
                      <div>
                        <span class="weight"> System: </span>
                        {{ state.data.system }}
                      </div>
                    </div>
                  </div>
                </div>
              </q-card-section>
 

          </div>
          <div class="col-7 fac">
            <!--           <ChildStockCodeList :stockItem="stockItem" v-if="stockItem.lv5.length==0" :style="'map'"></ChildStockCodeList> -->

            <PartsMap
              mode="part"
              :item="state.data"
              v-if="state.data.lv5.length == 0 && state.data.id != 0"
              ref="partsMap"
            ></PartsMap>
          </div>

          <div class="col-12  q-pa-sm">
           <!--  v-model="tab"
              dense
              no-caps
              mobile-arrows
              outer-arrows
              inline-label
              class="not-active-tab"
              indicator-color="primary"
              active-class="active-tab"
              align="justify"
              narrow-indicator -->
            <q-tabs
              v-model="tab"
              class="not-active-tab"
              active-class="active-tab"
              align="justify"
              dense
            >
              <q-tab name="main" label="Main" icon="feed" />
              <q-tab
                v-if="state.data.lv5.length == 0"
                name="child"
                label="Child"
                icon="list"
              >
                <q-badge
                  v-if="checkStatus && checkStatus.part_detail.outstanding"
                  color="red"
                  floating
                  rounded
                  >{{ checkStatus.part_detail.outstanding }}</q-badge
                >
              </q-tab>
              <q-tab name="task" label="Task" icon="task" />
              <q-tab name="cmhis" label="History" icon="history" />
              <q-tab name="sw_ver" label="S/W" icon="verified_user">
                <q-badge
                  v-if="checkStatus && checkStatus.version.sw.outstanding"
                  color="red"
                  floating
                  rounded
                  >{{ checkStatus.version.sw.outstanding }}</q-badge
                >
              </q-tab>

              <q-tab name="hw_ver" label="H/W" icon="verified_user">
                <q-badge
                  v-if="checkStatus && checkStatus.version.hw.outstanding"
                  color="red"
                  floating
                  rounded
                  >{{ checkStatus.version.hw.outstanding }}</q-badge
                >
              </q-tab>

              <!-- <q-tab name="ver" label="Version" icon="verified_user">
                <q-badge
                  v-if="checkStatus && checkStatus.version.outstanding"
                  color="red"
                  floating
                  rounded
                  >{{ checkStatus.version.outstanding }}</q-badge
                >
              </q-tab> -->
              <q-tab name="eDoc" label="eDoc" icon="check_circle_outline">
                <q-badge
                  v-if="checkStatus && checkStatus.edoc.outstanding"
                  color="red"
                  floating
                  rounded
                  >{{ checkStatus.edoc.outstanding }}</q-badge
                >
              </q-tab>
              <q-tab
                name="htReplacement"
                label="Replace"
                icon="event_available"
              >
                <q-badge
                  v-if="
                    checkStatus && checkStatus.hard_time_replacement.outstanding
                  "
                  color="red"
                  floating
                  rounded
                  >{{ checkStatus.hard_time_replacement.outstanding }}</q-badge
                >
              </q-tab>
              <q-tab
                name="impWork"
                label="Imp Work"
                icon="receipt_long"
              >
                <q-badge
                  v-if="
                    checkStatus && checkStatus.improvement_work.outstanding
                  "
                  color="red"
                  floating
                  rounded
                  >{{ checkStatus.improvement_work.outstanding }}</q-badge
                >
              </q-tab>
            </q-tabs>

            <q-tab-panels v-model="tab" animated>
              <q-tab-panel name="main">
                <q-card-section class="card-100vh scroll-container no-scroll">
                  <PartsForm
                    :action="'edit'"
                    v-if="state.data.id != 0"
                    :partItem="state.data"
                    @update="init"
                  ></PartsForm>
                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="child" animated>
                <q-card-section class="part-card-vh scroll-container no-scroll">
                  <ChildItemList
                    :partItem="state.data"
                    :style="'list'"
                    class="q-pa-sm"
                    @update-child="updateChild"
                  ></ChildItemList>
                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="task">
                <q-card-section class="no-scroll">
                  <TaskTable
                    :is-parent="state.data.lv5 == ''"
                    :stock_code="state.data.stock_code"
                  ></TaskTable>
                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="cmhis">
                <q-card-section class="no-scroll">
                  <OrderHistoryTable
                    :stock-code="state.data.stock_code"
                    :serial_no="state.data.serial_no"
                    :is-parent="state.data.lv5 == ''"
                  ></OrderHistoryTable>
                </q-card-section>
              </q-tab-panel>

              <!-- <q-tab-panel name="ver">
                <q-card-section class="part-card-vh scroll-container scroll">
                 

                 
                </q-card-section>
              </q-tab-panel> -->

              <q-tab-panel name="sw_ver">
                <q-card-section class="no-scroll">
                  <VersionHistory
                    :actions="'software'"
                    :partItem="state.data"
                  ></VersionHistory>
                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="hw_ver">
                <q-card-section class="no-scroll">
                  <VersionHistory
                    :actions="'hardware'"
                    :partItem="state.data"
                  ></VersionHistory>
                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="eDoc">
                <q-card-section>
         

             
                  <StockItemEDocList
                    :on-clickable="true"
                    :editable="false"
                    :stock-code="props.editedRow.stock_code"
                    :serial-no="props.editedRow.serial_no"
                    :part_id="props.editedRow.id"
                    :mode="'part'"
                  ></StockItemEDocList>
                  <!-- <div v-if="childs.length == 0 && state.data.lv5.length == 0">
                    <div class="text-red">
                      {{ 'Show the child edoc List if have parts' }}
                    </div>
                  </div> -->
                  <!-- <div v-if="childs.length > 0">
                    <div class="sub-header">
                      {{ 'Child edoc List' }}
                    </div>
                    <div v-for="(child, index) in childs" :key="index">
                      <StockItemEDocList
                        :on-clickable="true"
                        :editable="false"
                        :stock-code="child.stock_code"
                        :part_id="child.id"
                        :mode="'part'"
                      ></StockItemEDocList>
                    </div> -->
                  <!-- </div> -->
             

                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="htReplacement">
                <q-card-section class="no-scroll">
                  <PartHardTimeReplacement
                    :stock-code="props.editedRow.stock_code"
                    :serial_no="props.editedRow.serial_no"
                    :parent="true"
                  />
                </q-card-section>
              </q-tab-panel>

              <q-tab-panel name="impWork">
                <q-card-section class="no-scroll">
                  <StockItemImpWorkList
                    :on-clickable="true"
                    :editable="false"
                    :stock-code="props.editedRow.stock_code"
                    :part_id="props.editedRow.id"
                    :serial-no="props.editedRow.serial_no"
                    :mode="'part'"
                  />
                </q-card-section>
              </q-tab-panel>

            </q-tab-panels>
          </div>
        </div>
      </div>
    </q-card>

</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import ChildItemList from 'src/components/partsMaster/ChildItemList.vue';
import PartsMap from 'src/components/PartsMap.vue';
import { EventLogInterface, PartMasterCheckStatus, Parts } from 'src/services/type';
import TaskTable from './TaskTable.vue';
import OrderHistoryTable from 'src/components/orderHistory/OrderHistoryTable.vue';
import PartsForm from './PartsForm.vue';
import StockItemEDocList from '../edoc/StockItemEDocList.vue';
import VersionHistory from 'src/components/partsMaster/VersionHistory.vue';
import {
  getCheckStatus,
  // getChildPartsList,
  getPartDetailData,
} from 'src/services/partsService';
import PartHardTimeReplacement from '../htReplacement/PartHardTimeReplacement.vue';
import { getStatusColor } from 'src/utils/getPublic';
import { resolveFrontendUrl } from 'src/boot/axios';
import ScrollArea from 'src/components/ScrollArea.vue';

import StockItemImpWorkList from 'src/components/improvementWork/StockItemImpWorkList.vue'
import MyBigDialog from '../container/MyBigDialog.vue';
import LogCard from 'src/components/log/LogCard.vue'
import { getDepotLogByPart } from 'src/services/activityLogService';
const tab = ref('main');

const childs = ref<Parts[]>([]);

const car_logs = ref<EventLogInterface[]>([])

const props = defineProps<{
  editedRow: Parts;
}>();

const state = reactive<{
  data: Parts;
}>({
  data: {
    id: 0,
    stock_code: '',
    serial_no: '',
    system: '',
    car: '',
    location: '',
    workgroup: '',
    description: '',
    date_code: '',
    sw_ver: '',
    hw_ver: '',
    assets: '',
    equipmentClass: '',
    lv1: '',
    lv2: '',
    lv3: '',
    lv4: '',
    lv5: '',
    lv6: '',
    sequence: 0,
    qr_code: '',
    create: '',
    last_check_in: '',
    last_check_out: '',
    last_status: '',
    last_status_details: '',
    purchase_date: '',
    image: '',
    io_counter: '',
    detail_description: '',
    deliver_to: '',
    parent_part: 0,
    parent_part_stock_code: '',
    parent_part_serial_number: '',
  },
});

const outstanding = ref(0);

const partsMap = ref<typeof PartsMap>();
const version = ref<typeof VersionHistory>();

const depotHistory = ref(false)

const partStatus = ref('no-status');

const checkStatus = ref<PartMasterCheckStatus>();

async function initCheckStatus() {
  /*  checkStatus.value = {
    part_detail: { outstanding: 0, message: [] },
    version: { outstanding: 0, message: [] },
    edoc: { outstanding: 0, message: [] },
    hard_time_replacement: { outstanding: 0, message: [] },
  }; */
  const res = await getCheckStatus(
    props.editedRow.stock_code,
    props.editedRow.serial_no
  );
  if (res.data) {
    checkStatus.value = res.data;
  }
  if (
    checkStatus.value &&
    checkStatus.value.part_detail.outstanding == 0 &&
    checkStatus.value.version.sw.outstanding == 0 &&
    checkStatus.value.version.hw.outstanding == 0 &&
    checkStatus.value.edoc.outstanding == 0 &&
    checkStatus.value.improvement_work.outstanding == 0 &&
    checkStatus.value.hard_time_replacement.outstanding == 0
  ) {
    partStatus.value = 'All Pass';
  }
  if (
    checkStatus.value &&
    (checkStatus.value.part_detail.outstanding != 0 ||
      checkStatus.value.version.sw.outstanding != 0 ||
      checkStatus.value.version.hw.outstanding != 0 ||
      checkStatus.value.edoc.outstanding != 0 ||
      checkStatus.value.hard_time_replacement.outstanding != 0)
  ) {
    partStatus.value = 'Not Complete';
    outstanding.value =
      checkStatus.value?.edoc.outstanding +
      checkStatus.value?.hard_time_replacement.outstanding +
      checkStatus.value?.part_detail.outstanding +
      checkStatus.value?.version.sw.outstanding;
    checkStatus.value?.version.hw.outstanding;
  }
}

function updateChild() {
  if (partsMap.value) {
    partsMap.value.manualUpdate();
  }
  init();
  // getChildParts();
  initCheckStatus();
}

async function init() {
  const res = await getPartDetailData(props.editedRow.id);
  if (res.data) {
    console.log(res.data);
    
    state.data = res.data;
  }
  // getChildParts();
  initCheckStatus();
}

// async function getChildParts() {
//   const res = await getChildPartsList(
//     props.editedRow.stock_code,
//     props.editedRow.serial_no
//   );
//   if (res.data) {
//     childs.value = res.data;
//   }
// }

async function onDepotHistory(){
const res = await getDepotLogByPart(
  props.editedRow.stock_code,
  props.editedRow.serial_no,
  );
  console.log(res);
  car_logs.value = res
  depotHistory.value = true
}

onMounted(() => {
  init();
  // getChildParts();
  initCheckStatus();
  tab.value = 'main';
});
</script>

<style scoped>
.status-color-red {
  width: 42px;
  height: 18px;
  background-color: red;
  margin: 5px;
}
.header {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 10px;
}

.card-action {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-style {
  width: 100px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 3px;
}

.right-container {
  height: 170px;
  padding-top: 20px;
}


.q-tab-panel {
  padding: 0;
}

</style>
